<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Dom7 - Custom DOM Library | Framework7 Documentation</title>
    <meta property="og:image" content="http://framework7.io/i/f7-banner.jpg">
    <meta name="viewport" content="width=device-width, viewport-fit=cover">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:site" content="@framework7io">
    <meta name="twitter:creator" content="@framework7io">
    <meta name="twitter:title" content="Dom7 - Custom DOM Library | Framework7 Documentation">
    <meta name="twitter:image" content="https://avatars0.githubusercontent.com/u/31954178?s=200&amp;v=4">
    <link rel="stylesheet" href="/framework7-v3/css/normalize.css">
    <link rel="stylesheet" href="/framework7-v3/css/main.css">
    <link rel="shortcut icon" href="/framework7-v3/i/favicon.png">
    <script src="/framework7-v3/js/modernizr-2.7.1.min.js"></script>
  </head>
  <body class="body-docs">
    <header class="internal-header">
      <div class="center">
        <div class="logo-holder"><a class="logo" href="/framework7-v3/"></a></div>
        <div class="header-content">
          <div class="title">Framework7
            <div class="version">v3.6.7</div>
          </div>
          <ul class="nav">
            <li><a href="/framework7-v3/docs/">Docs</a>
              <ul>
                <li><a href="/framework7-v3/docs/introduction.html">Getting Started</a></li>
                <li><a href="/framework7-v3/docs/">Framework7 Core / API</a></li>
                <li><a href="/framework7-v3/vue/">Framework7 Vue</a></li>
                <li><a href="/framework7-v3/react/">Framework7 React</a></li>
                <li><a href="https://framework7.io/icons/" target="_blank">Framework7 Icons</a></li>
                <li><a href="/framework7-v3/docs/dom7.html">Dom7</a></li>
                <li><a href="http://idangero.us/template7/" target="_blank">Template7</a></li>
              </ul>
            </li>
            <li><a href="#">Resources</a>
              <ul>
                <li><a href="http://forum.framework7.io" target="_blank">Community Forum</a></li>
                <li><a href="https://framework7.io/tutorials/" target="_blank">Tutorials</a></li>
                <li><a href="https://framework7.io/templates/" target="_blank">Templates</a></li>
                <li><a href="https://framework7.io/plugins/" target="_blank">Plugins</a></li>
                <li><a href="https://framework7.io/showcase/" target="_blank">Apps Showcase</a></li>
                <li><a href="https://jobs.framework7.io" target="_blank">Jobs & Developers</a></li>
              </ul>
            </li>
            <li><a href="http://blog.framework7.io" target="_blank">Blog</a></li>
            <li><a href="https://framework7.io/contribute/" target="_blank">Contribute</a></li>
          </ul>
          <div class="patreon-github"><a class="patreon-button" href="https://www.patreon.com/vladimirkharlampidi" target="_blank"><span class="patreon-logo"></span><span class="patreon-text">Support Framework7</span></a>
            <div class="github-buttons"><a href="https://github.com/framework7io/framework7/" target="_blank"><img src="/framework7-v3/i/gh-logo.png"></a><a class="gh-stars" href="https://github.com/framework7io/framework7/" target="_blank"><span></span> stars</a><a class="gh-forks" href="https://github.com/framework7io/framework7/" target="_blank"><span></span> forks</a></div>
          </div>
        </div>
      </div>
    </header>
    <div class="bsa-cpc"></div>
    <main>
      <div class="center">
        <div class="docs-nav">
          <div class="docs-nav-toggle"><span></span><span></span><span></span></div>
          <ul>
            <li>
              <div class="title">Get Started</div>
              <ul>
                <li><a href="introduction.html">Introduction</a></li>
                <li><a href="kitchen-sink.html">Kitchen Sink</a></li>
                <li><a href="installation.html">Installation</a></li>
                <li><a href="app-layout.html">App HTML Layout</a></li>
                <li><a href="rtl-layout.html">RTL Layout</a></li>
                <li><a href="init-app.html">Initialize App</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Events</div>
              <ul>
                <li><a href="events.html">Events</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Router / Navigation</div>
              <ul>
                <li><a href="routes.html">Routes</a></li>
                <li><a href="router-component.html">Router Component</a></li>
                <li><a href="view.html#router-api-methods-properties">Router API</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Components</div>
              <ul>
                <li><a href="app.html">App / Core</a></li>
                <li><a href="accordion.html">Accordion / Collapsible</a></li>
                <li><a href="action-sheet.html">Action Sheet / Actions</a></li>
                <li><a href="autocomplete.html">Autocomplete</a></li>
                <li><a href="badge.html">Badge</a></li>
                <li><a href="block.html">Block / Content Block</a></li>
                <li><a href="button.html">Button</a></li>
                <li><a href="calendar.html">Calendar / Datepicker</a></li>
                <li><a href="cards.html">Cards</a></li>
                <li><a href="checkbox.html">Checkbox</a></li>
                <li><a href="chips.html">Chips / Tags</a></li>
                <li><a href="contacts-list.html">Contacts List</a></li>
                <li><a href="data-table.html">Data Table</a></li>
                <li><a href="dialog.html">Dialog</a></li>
                <li><a href="elevation.html">Elevation</a></li>
                <li><a href="floating-action-button.html">Floating Action Button / FAB</a></li>
                <li><a href="form.html">Form Data / Storage</a></li>
                <li><a href="gauge.html">Gauge</a></li>
                <li><a href="grid.html">Grid / Layout Grid</a></li>
                <li><a href="icons.html">Icons</a></li>
                <li><a href="infinite-scroll.html">Infinite Scroll</a></li>
                <li><a href="inputs.html">Inputs / Form Inputs</a></li>
                <li><a href="lazy-load.html">Lazy Load</a></li>
                <li><a href="link.html">Link</a></li>
                <li><a href="list-view.html">List View</a></li>
                <li><a href="list-index.html">List Index</a></li>
                <li><a href="login-screen.html">Login Screen</a></li>
                <li><a href="messagebar.html">Messagebar</a></li>
                <li><a href="messages.html">Messages</a></li>
                <li><a href="navbar.html">Navbar</a></li>
                <li><a href="notification.html">Notification</a></li>
                <li><a href="page.html">Page</a></li>
                <li><a href="panel.html">Panel / Side Panels</a></li>
                <li><a href="photo-browser.html">Photo Browser</a></li>
                <li><a href="picker.html">Picker</a></li>
                <li><a href="popover.html">Popover</a></li>
                <li><a href="popup.html">Popup</a></li>
                <li><a href="preloader.html">Preloader</a></li>
                <li><a href="progressbar.html">Progressbar</a></li>
                <li><a href="pull-to-refresh.html">Pull to Refresh</a></li>
                <li><a href="radio.html">Radio</a></li>
                <li><a href="range-slider.html">Range Slider</a></li>
                <li><a href="searchbar.html">Searchbar</a></li>
                <li><a href="sheet-modal.html">Sheet Modal</a></li>
                <li><a href="smart-select.html">Smart Select</a></li>
                <li><a href="sortable-list.html">Sortable List</a></li>
                <li><a href="statusbar.html">Statusbar</a></li>
                <li><a href="stepper.html">Stepper</a></li>
                <li><a href="subnavbar.html">Subnavbar</a></li>
                <li><a href="swiper.html">Swiper</a></li>
                <li><a href="swipeout.html">Swipeout</a></li>
                <li><a href="tabs.html">Tabs</a></li>
                <li><a href="timeline.html">Timeline</a></li>
                <li><a href="toast.html">Toast</a></li>
                <li><a href="toggle.html">Toggle</a></li>
                <li><a href="toolbar-tabbar.html">Toolbar / Tabbar</a></li>
                <li><a href="tooltip.html">Tooltip</a></li>
                <li><a href="vi.html">Video Intelligence (vi)</a></li>
                <li><a href="view.html">View / Router</a></li>
                <li><a href="virtual-list.html">Virtual List</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Framework7 Icons</div>
              <ul>
                <li><a href="/icons/">Framework7 Icons Cheatsheet</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Styling</div>
              <ul>
                <li><a href="iphone-x.html">iPhone X</a></li>
                <li><a href="color-themes.html">Color Themes</a></li>
                <li><a href="typography.html">Typography</a></li>
                <li><a href="hairlines.html">Hairlines</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Dom7</div>
              <ul>
                <li><a href="dom7.html">Dom7</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Template7</div>
              <ul>
                <li><a href="template7.html">Template7</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Fast Clicks</div>
              <ul>
                <li><a href="fast-clicks.html">Fast Clicks</a></li>
                <li><a href="active-state.html">Active State</a></li>
                <li><a href="tap-hold.html">Tap Hold Event (Long Tap)</a></li>
                <li><a href="touch-ripple.html">Touch Ripple (MD Theme)</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Utilities</div>
              <ul>
                <li><a href="request.html">Request / Ajax</a></li>
                <li><a href="utils.html">Utils</a></li>
                <li><a href="device.html">Device</a></li>
                <li><a href="support.html">Support</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Plugins API</div>
              <ul>
                <li><a href="plugins-api.html">Plugins API</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Lazy Modules</div>
              <ul>
                <li><a href="lazy-modules.html">Lazy Modules</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Custom Build</div>
              <ul>
                <li><a href="custom-build.html">Custom Build</a></li>
              </ul>
            </li>
          </ul>
        </div>
        <div class="docs-content">
          <div class="improve-docs-link"><a href="https://github.com/gzxishan/framework7-websitev3/edit/master/src/pug/undefined" target="_blank">Improve this Doc</a></div>
          <h1>Dom7 - Custom DOM Library</h1>
          <ul class="docs-index"></ul>
          <p>Framework7 doesn't use any third party library, even for DOM manipulation. It has its own custom DOM7 - DOM library that utilizes most edge and high-performance methods for DOM manipulation. You don’t need to learn something new, its usage is very simple because it has the same syntax as well known jQuery library with support of the most popular and widely used methods and jQuery-like chaining.</p>
          <p>To start use it there is a <code>Dom7</code> global window function, but we recommend to assign it to some local variable with more handy name, like <code>$$</code>, but not to "$" to prevent confilicts with other libraries like jQuery or Zepto:</p><pre><code class="js"><span class="token comment">//Export DOM7 to local variable to make it easy accessable</span>
<span class="token keyword">var</span> $$ <span class="token operator">=</span> Dom7<span class="token punctuation">;</span></pre></code>
          <h2>Usage Example</h2>
          <p>Just everything you already know:</p><pre><code class="js"><span class="token function">$$</span><span class="token punctuation">(</span><span class="token string">'.something'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">$$</span><span class="token punctuation">(</span><span class="token context">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">addClass</span><span class="token punctuation">(</span><span class="token string">'hello'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">attr</span><span class="token punctuation">(</span><span class="token string">'title'</span><span class="token punctuation">,</span> <span class="token string">'world'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">insertAfter</span><span class="token punctuation">(</span><span class="token string">'.something-else'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></code>
          <h2>Available Methods</h2>
          <p>All these methods works almost in the same way and with the same arguments as in jQuery or Zepto:</p>
          <table class="methods-table dom7-table">
            <tbody>
              <tr>
                <th colspan="2">Classes</th>
              </tr>
              <tr>
                <td>.addClass(<span>className</span>)</td>
                <td>
                  Add class to elements<pre><code class="js"><span class="token comment">//Add "intro" class to all paragraphs</span>
<span class="token function">$$</span><span class="token punctuation">(</span><span class="token string">'p'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">addClass</span><span class="token punctuation">(</span><span class="token string">'intro'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></code>
                </td>
              </tr>
              <tr>
                <td>.removeClass(<span>className</span>)</td>
                <td>
                  Remove specified class<pre><code class="js"><span class="token comment">//Add "big" class from all links with "big" class</span>
<span class="token function">$$</span><span class="token punctuation">(</span><span class="token string">'a.big'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">removeClass</span><span class="token punctuation">(</span><span class="token string">'big'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></code>
                </td>
              </tr>
              <tr>
                <td>.hasClass(<span>className</span>)</td>
                <td>
                  Determine whether any of the matched elements are assigned the given class:<pre><code class="html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>intro<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Lorem ipsum...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span></pre></code><pre><code class="js"><span class="token function">$$</span><span class="token punctuation">(</span><span class="token string">'p'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">hasClass</span><span class="token punctuation">(</span><span class="token string">'intro'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//-> true</span></pre></code></td>
              </tr>
              <tr>
                <td>.toggleClass(<span>className</span>)</td>
                <td>
                  Remove (if class is present) or add (if not) one or more classes from each element in the set of matched elements:<pre><code class="html"><span class="token comment">&lt;!-- Before --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>This is first title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span><span class="token punctuation">></span></span>This is subtitle<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">></span></span></pre></code><pre><code class="js"><span class="token function">$$</span><span class="token punctuation">(</span><span class="token string">'h1, h2'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toggleClass</span><span class="token punctuation">(</span><span class="token string">'small'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></code><pre><code class="html"><span class="token comment">&lt;!-- After --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">></span></span>This is first title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>This is subtitle<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">></span></span></pre></code>
                </td>
              </tr>
              <tr>
                <th colspan="2">Attributes and properties</th>
              </tr>
              <tr>
                <td>.prop(<span>propName</span>)</td>
                <td>
                  Get property value:<pre><code class="js"><span class="token keyword">var</span> isChecked <span class="token operator">=</span> <span class="token function">$$</span><span class="token punctuation">(</span><span class="token string">'input'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">prop</span><span class="token punctuation">(</span><span class="token string">'checked'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></code></td>
              </tr>
              <tr>
                <td>.prop(<span>propName</span>, <span>propValue</span>)</td>
                <td>
                  Set single property value:<pre><code class="js"><span class="token comment">//Make all checkboxes checked</span>
<span class="token function">$$</span><span class="token punctuation">(</span><span class="token string">'input[type="checkbox"]'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">prop</span><span class="token punctuation">(</span><span class="token string">'checked'</span><span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></code>
                </td>
              </tr>
              <tr>
                <td>.prop(<span>propertiesObject</span>)</td>
                <td>
                  Set multiple properties:<pre><code class="js"><span class="token function">$$</span><span class="token punctuation">(</span><span class="token string">'input'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">prop</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  checked<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
  disabled<span class="token punctuation">:</span> <span class="token boolean">true</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span></pre></code>
                </td>
              </tr>
              <tr>
                <td>.attr(<span>attrName</span>)</td>
                <td>
                  Get attribute value:<pre><code class="html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>http://google.com<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Google<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span></pre></code><pre><code class="js"><span class="token keyword">var</span> link <span class="token operator">=</span> <span class="token function">$$</span><span class="token punctuation">(</span><span class="token string">'a'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">attr</span><span class="token punctuation">(</span><span class="token string">'href'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//-> http://google.com</span></pre></code></td>
              </tr>
              <tr>
                <td>.attr(<span>attrName</span>, <span>attrValue</span>)</td>
                <td>
                  Set single attribute value:<pre><code class="js"><span class="token comment">//Set all links to google</span>
<span class="token function">$$</span><span class="token punctuation">(</span><span class="token string">'a'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">attr</span><span class="token punctuation">(</span><span class="token string">'href'</span><span class="token punctuation">,</span> <span class="token string">'http://google.com'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></code>
                </td>
              </tr>
              <tr>
                <td>.attr(<span>attributesObject</span>)</td>
                <td>
                  Set multiple attributes:<pre><code class="js"><span class="token function">$$</span><span class="token punctuation">(</span><span class="token string">'a'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">attr</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  id<span class="token punctuation">:</span> <span class="token string">'new-id'</span><span class="token punctuation">,</span>
  title<span class="token punctuation">:</span> <span class="token string">'Link to Google'</span><span class="token punctuation">,</span>
  href<span class="token punctuation">:</span> <span class="token string">'http://google.com'</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span></pre></code>
                </td>
              </tr>
              <tr>
                <td>.removeAttr(<span>attrName</span>)</td>
                <td>
                  Remove specified attribute:<pre><code class="js"><span class="token comment">//Remove "src" attribute from all images</span>
<span class="token function">$$</span><span class="token punctuation">(</span><span class="token string">'img'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">removeAttr</span><span class="token punctuation">(</span><span class="token string">'src'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></code>
                </td>
              </tr>
              <tr>
                <td>.val()</td>
                <td>
                  Get the current value of the first element in the set of matched elements<pre><code class="html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>myInput<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Lorem ipsum<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span></pre></code><pre><code class="js"><span class="token keyword">var</span> inputVal <span class="token operator">=</span> <span class="token function">$$</span><span class="token punctuation">(</span><span class="token string">'#myInput'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">val</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//-> 'Lorem ipsum'</span></pre></code></td>
              </tr>
              <tr>
                <td>.val(<span>newValue</span>)</td>
                <td>
                  Set the value of every matched element<pre><code class="js"><span class="token function">$$</span><span class="token punctuation">(</span><span class="token string">'input#myInput'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">val</span><span class="token punctuation">(</span><span class="token string">'New value here'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></code></td>
              </tr>
              <tr>
                <th colspan="2">Data storage</th>
              </tr>
              <tr>
                <td>.data(<span>key</span>, <span>value</span>)</td>
                <td>
                  Store arbitrary data associated with the matched elements<pre><code class="js"><span class="token function">$$</span><span class="token punctuation">(</span><span class="token string">'a'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">data</span><span class="token punctuation">(</span><span class="token string">'user'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
    id<span class="token punctuation">:</span> <span class="token string">'123'</span><span class="token punctuation">,</span>
    name<span class="token punctuation">:</span> <span class="token string">'John'</span><span class="token punctuation">,</span>
    email<span class="token punctuation">:</span> <span class="token string">'john@doe.com'</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></code>
                </td>
              </tr>
              <tr>
                <td>.data(<span>key</span>)</td>
                <td>
                  Return the value at the named data store for the first element in the collection, as set by data(key, value) or by an HTML5 data-* attribute<pre><code class="js"><span class="token keyword">var</span> user <span class="token operator">=</span> <span class="token function">$$</span><span class="token punctuation">(</span><span class="token string">'a'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">data</span><span class="token punctuation">(</span><span class="token string">'user'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//-> {id: '123', name: 'John', email: 'john@doe.com'}</span></pre></code>
                  <p>or</p><pre><code class="html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">data-id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>123<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Lorem ipsum...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span></pre></code><pre><code class="js"><span class="token keyword">var</span> id <span class="token operator">=</span> <span class="token function">$$</span><span class="token punctuation">(</span><span class="token string">'p'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">data</span><span class="token punctuation">(</span><span class="token string">'id'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//-> 123</span></pre></code>
                </td>
              </tr>
              <tr>
                <td>.removeData(<span>key</span>)</td>
                <td>
                  Remove specified data<pre><code class="js"><span class="token function">$$</span><span class="token punctuation">(</span><span class="token string">'a'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">removeData</span><span class="token punctuation">(</span><span class="token string">'user'</span><span class="token punctuation">)</span></pre></code></td>
              </tr>
              <tr>
                <th colspan="2">Data Set</th>
              </tr>
              <tr>
                <td>.dataset()</td>
                <td>
                  Returns element's data set (set of data- attributes) as plain Object<pre><code class="html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>my-div<span class="token punctuation">"</span></span> <span class="token attr-name">data-loop</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span> <span class="token attr-name">data-animate-pages</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>false<span class="token punctuation">"</span></span> <span class="token attr-name">data-index</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">data-hello</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>world<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    ...
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre></code><pre><code class="js"><span class="token keyword">var</span> dataset <span class="token operator">=</span> <span class="token function">$$</span><span class="token punctuation">(</span><span class="token string">'#my-div'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">dataset</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">/*
dataset will contain plain object with camelCase keys and with formatted boolean and number types:
{
    loop: true,
    animatePages: false,
    index: 0,
    hello: 'world'
}
*/</span></pre></code>
                </td>
              </tr>
              <tr>
                <th colspan="2">CSS transform, transitions</th>
              </tr>
              <tr>
                <td>.transform(<span>CSSTransformString</span>)</td>
                <td>
                  Adds prefixed CSS transform property:<pre><code class="js"><span class="token function">$$</span><span class="token punctuation">(</span><span class="token string">'a'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">transform</span><span class="token punctuation">(</span><span class="token string">'rotate(90deg)'</span><span class="token punctuation">)</span></pre></code></td>
              </tr>
              <tr>
                <td>.transition(<span>transitionDuration</span>)</td>
                <td>
                  Set CSS transition-duration property to collection:<pre><code class="js"><span class="token function">$$</span><span class="token punctuation">(</span><span class="token string">'p'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">transition</span><span class="token punctuation">(</span><span class="token number">300</span><span class="token punctuation">)</span></pre></code></td>
              </tr>
              <tr>
                <th colspan="2">Events</th>
              </tr>
              <tr>
                <td>.on(<span>eventName</span>, <span>handler</span>, <span>useCapture</span>)</td>
                <td>
                  Add event handler function to one or more events to the selected elements.<pre><code class="js"><span class="token function">$$</span><span class="token punctuation">(</span><span class="token string">'a'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token built-in">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'clicked'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></code><pre><code class="js"><span class="token function">$$</span><span class="token punctuation">(</span><span class="token string">'input[type="text"]'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'keyup keydown change'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token built-in">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'input value changed'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></code>
                </td>
              </tr>
              <tr>
                <td>.on(<span>eventName</span>, <span>delegatedTarget</span>, <span>handler</span>, <span>useCapture</span>)</td>
                <td>
                  Live/delegated event handler<pre><code class="js"><span class="token function">$$</span><span class="token punctuation">(</span>document<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token string">'a'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token built-in">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'link clicked'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></code>
                </td>
              </tr>
              <tr>
                <td>.once(<span>eventName</span>, <span>handler</span>, <span>useCapture</span>)</td>
                <td>
                  Add event handler function to one or more events to the selected elements that will be executed only once<pre><code class="js"><span class="token function">$$</span><span class="token punctuation">(</span><span class="token string">'a'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">once</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token built-in">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'clicked'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></code><pre><code class="js"><span class="token function">$$</span><span class="token punctuation">(</span><span class="token string">'input[type="text"]'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">once</span><span class="token punctuation">(</span><span class="token string">'keyup keydown change'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token built-in">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'input value changed'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></code>
                </td>
              </tr>
              <tr>
                <td>.once(<span>eventName</span>, <span>delegatedTarget</span>, <span>handler</span>, <span>useCapture</span>)</td>
                <td>
                  Live/delegated event handler that will be executed only once<pre><code class="js"><span class="token function">$$</span><span class="token punctuation">(</span>document<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">once</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token string">'a'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token built-in">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'link clicked'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></code>
                </td>
              </tr>
              <tr>
                <td>.off(<span>eventName</span>, <span>handler</span>, <span>useCapture</span>)</td>
                <td>
                  Remove event handler<pre><code class="js"><span class="token keyword">function</span> <span class="token function">clickHandler</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token built-in">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'clicked'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">// Add event listener</span>
<span class="token function">$$</span><span class="token punctuation">(</span><span class="token string">'a'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> clickHandler<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// Remove event listener</span>
<span class="token function">$$</span><span class="token punctuation">(</span><span class="token string">'a'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">off</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> clickHandler<span class="token punctuation">)</span><span class="token punctuation">;</span>
</pre></code>
                </td>
              </tr>
              <tr>
                <td>.off(<span>eventName</span>, <span>delegatedTarget</span>, <span>handler</span>, <span>useCapture</span>)</td>
                <td>
                  Remove live/delegated event handler<pre><code class="js"><span class="token keyword">function</span> <span class="token function">clickHandler</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token built-in">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'clicked'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">// Add event listener</span>
<span class="token function">$$</span><span class="token punctuation">(</span>document<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token string">'a'</span><span class="token punctuation">,</span> clickHandler<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// Remove event listener</span>
<span class="token function">$$</span><span class="token punctuation">(</span>document<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">off</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token string">'a'</span><span class="token punctuation">,</span> clickHandler<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></code>
                </td>
              </tr>
              <tr>
                <td>.trigger(<span>eventName</span>, <span>eventData</span>)</td>
                <td>Execute all handlers added to the matched elements for the specified event</td><pre><code class="js"><span class="token function">$$</span><span class="token punctuation">(</span><span class="token built-in">window</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">trigger</span><span class="token punctuation">(</span><span class="token string">'resize'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></code>
              </tr>
              <tr>
                <td>.transitionEnd(<span>callback</span>, <span>permanent</span>)</td>
                <td>
                  Adds prefixed transitionEnd event handler to collection:<pre><code class="js"><span class="token function">$$</span><span class="token punctuation">(</span><span class="token string">'a'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">transitionEnd</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token comment">/* do something */</span> <span class="token punctuation">}</span><span class="token punctuation">)</span></pre></code></td>
              </tr>
              <tr>
                <td>.animationEnd(<span>callback</span>)</td>
                <td>
                  Adds prefixed animationEnd event handler to collection:<pre><code class="js"><span class="token function">$$</span><span class="token punctuation">(</span><span class="token string">'a'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">animationEnd</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token comment">/* do something */</span> <span class="token punctuation">}</span><span class="token punctuation">)</span></pre></code></td>
              </tr>
              <tr>
                <th colspan="2">Styles</th>
              </tr>
              <tr>
                <td>.width()</td>
                <td>
                  Get the current computed width for the first element in the set of matched elements<pre><code class="js"><span class="token keyword">var</span> boxWidth <span class="token operator">=</span> <span class="token function">$$</span><span class="token punctuation">(</span><span class="token string">'div#box'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">width</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></code></td>
              </tr>
              <tr>
                <td>.outerWidth(<span>[includeMargin]</span>)</td>
                <td>
                  Get the current computed width for the first element in the set of matched elements, including padding and border, and margin (if includeMargin is <b>true</b>)<pre><code class="js"><span class="token keyword">var</span> outerWidth <span class="token operator">=</span> <span class="token function">$$</span><span class="token punctuation">(</span><span class="token string">'div#box'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">outerWidth</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></code></td>
              </tr>
              <tr>
                <td>.height()</td>
                <td>
                  Get the current computed height for the first element in the set of matched elements<pre><code class="js"><span class="token keyword">var</span> boxHeight <span class="token operator">=</span> <span class="token function">$$</span><span class="token punctuation">(</span><span class="token string">'div#box'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">height</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></code></td>
              </tr>
              <tr>
                <td>.outerHeight(<span>[includeMargin]</span>)</td>
                <td>
                  Get the current computed height for the first element in the set of matched elements, including padding and border, and margin (if includeMargin is <b>true</b>)<pre><code class="js"><span class="token keyword">var</span> outerHeight <span class="token operator">=</span> <span class="token function">$$</span><span class="token punctuation">(</span><span class="token string">'div#box'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">outerHeight</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></code></td>
              </tr>
              <tr>
                <td>.offset()</td>
                <td>
                  Get the current coordinates of the first element relative to the document<pre><code class="js"><span class="token keyword">var</span> coords <span class="token operator">=</span> <span class="token function">$$</span><span class="token punctuation">(</span><span class="token string">'.content'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">offset</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//-> {top: 100, left: 200}</span>
<span class="token keyword">var</span> top <span class="token operator">=</span> coords<span class="token punctuation">.</span>top<span class="token punctuation">;</span> <span class="token comment">//-> 100</span>
<span class="token keyword">var</span> left <span class="token operator">=</span> coords<span class="token punctuation">.</span>left<span class="token punctuation">;</span> <span class="token comment">//-> 200</span></pre></code>
                </td>
              </tr>
              <tr>
                <td>.hide()</td>
                <td>
                  Set "display:none" to the matched elements<pre><code class="js"><span class="token comment">//hide all paragraphs</span>
<span class="token function">$$</span><span class="token punctuation">(</span><span class="token string">'p'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">hide</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></code>
                </td>
              </tr>
              <tr>
                <td>.show()</td>
                <td>
                  Set "display:block" to the matched elements<pre><code class="js"><span class="token comment">//show all paragraphs</span>
<span class="token function">$$</span><span class="token punctuation">(</span><span class="token string">'p'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">show</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></code>
                </td>
              </tr>
              <tr>
                <td>.css(<span>property</span>)</td>
                <td>
                  Get value of specified CSS property for the first element:<pre><code class="js"><span class="token function">$$</span><span class="token punctuation">(</span><span class="token string">'.content'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token string">'left'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//-> 200px</span></pre></code></td>
              </tr>
              <tr>
                <td>.css(<span>property</span>, <span>value</span>)</td>
                <td>
                  Set specified CSS property to the matched elements:<pre><code class="js"><span class="token function">$$</span><span class="token punctuation">(</span><span class="token string">'.content'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token string">'left'</span><span class="token punctuation">,</span> <span class="token string">'100px'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></code></td>
              </tr>
              <tr>
                <td>.css(<span>propertiesObject</span>)</td>
                <td>
                  Set multiple CSS properties to the matched elements:<pre><code class="js"><span class="token function">$$</span><span class="token punctuation">(</span><span class="token string">'a'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    left<span class="token punctuation">:</span> <span class="token string">'100px'</span><span class="token punctuation">,</span>
    top<span class="token punctuation">:</span> <span class="token string">'200px'</span><span class="token punctuation">,</span>
    color<span class="token punctuation">:</span> <span class="token string">'red'</span><span class="token punctuation">,</span>
    width<span class="token punctuation">:</span> <span class="token string">'300px'</span><span class="token punctuation">,</span>
    marginLeft<span class="token punctuation">:</span> <span class="token string">'17px'</span><span class="token punctuation">,</span>
    <span class="token string">'padding-right'</span><span class="token punctuation">:</span> <span class="token string">'20px'</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></code>
                </td>
              </tr>
              <tr>
                <th colspan="2">Scroll</th>
              </tr>
              <tr>
                <td>.scrollTop()</td>
                <td>Get scrollTop position of element</td>
              </tr>
              <tr>
                <td>.scrollTop(<span>position</span>, <span>duration</span>, <span>callback</span>)</td>
                <td>Set scrollTop "position" with animation during "duration" (in ms). Scroll top position will be set immediately if duration is not specified. If you have specified "callback" function, then it will be executed after scrolling completed</td>
              </tr>
              <tr>
                <td>.scrollLeft()</td>
                <td>Get scrollLeft position of element</td>
              </tr>
              <tr>
                <td>.scrollLeft(<span>position</span>, <span>duration</span>, <span>callback</span>)</td>
                <td>Set scrollLeft "position" with animation during "duration" (in ms). Scroll left postion will be set immediately if duration is not specified. If you have specified "callback" function, then it will be executed after scrolling completed</td>
              </tr>
              <tr>
                <td>.scrollTo(<span>left</span>, <span>top</span>, <span>duration</span>, <span>callback</span>)</td>
                <td>Set scroll left and scroll top with animation during "duration" (in ms). Scroll postion will be set immediately if duration is not specified. If you have specified "callback" function, then it will be executed after scrolling completed</td>
              </tr>
              <tr>
                <th colspan="2">Dom Manipulation</th>
              </tr>
              <tr>
                <td>.add(elements)</td>
                <td>
                  Create a new Dom7 collection with elements added to the set of matched elements:<pre><code class="js"><span class="token keyword">var</span> links <span class="token operator">=</span> <span class="token function">$$</span><span class="token punctuation">(</span><span class="token string">'a'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> divs <span class="token operator">=</span> <span class="token function">$$</span><span class="token punctuation">(</span><span class="token string">'div'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
links<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'p'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">addClass</span><span class="token punctuation">(</span><span class="token string">'blue'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
links<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span>divs<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">addClass</span><span class="token punctuation">(</span><span class="token string">'red'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</pre></code>
                </td>
              </tr>
              <tr>
                <td>.each(<span>callback</span>)</td>
                <td>Iterate over collection, executing a callback function for each matched element</td>
              </tr>
              <tr>
                <td>.html()</td>
                <td>Get the HTML contents of the first element in the set of matched elements</td>
              </tr>
              <tr>
                <td>.html(<span>newInnerHTML</span>)</td>
                <td>Set the HTML contents of every matched element</td>
              </tr>
              <tr>
                <td>.text()</td>
                <td>Get the text contents of the first element in the set of matched elements</td>
              </tr>
              <tr>
                <td>.text(<span>newTextContent</span>)</td>
                <td>Set the text contents of every matched element</td>
              </tr>
              <tr>
                <td>.is(<span>CSSSelector</span>)</td>
                <td>Check the current matched set of elements against CSS selector</td>
              </tr>
              <tr>
                <td>.is(<span>HTMLElement</span>)</td>
                <td>Check the current matched set of elements against HTML element or Dom7 collection</td>
              </tr>
              <tr>
                <td>.index()</td>
                <td>Return the position of the first element within the Dom7 collection relative to its sibling elements</td>
              </tr>
              <tr>
                <td>.eq(<span>index</span>)</td>
                <td>Reduce the set of matched elements to the one at the specified index</td>
              </tr>
              <tr>
                <td>.append(<span>HTMLString</span>)</td>
                <td>Insert content, specified by the parameter, to the end of each element in the set of matched elements</td>
              </tr>
              <tr>
                <td>.append(<span>HTMLElement</span>)</td>
                <td>Insert specified HTML element to the end of element in the set of matched elements</td>
              </tr>
              <tr>
                <td>.appendTo(<span>HTMLElement</span>)</td>
                <td>Insert content/elements, to the end of element specified in parameter</td>
              </tr>
              <tr>
                <td>.prepend(<span>newHTML</span>)</td>
                <td>Insert content, specified by the parameter, to the beginning of each element in the set of matched elements</td>
              </tr>
              <tr>
                <td>.prepend(<span>HTMLElement</span>)</td>
                <td>Insert specified HTML element to the beginning of element in the set of matched elements</td>
              </tr>
              <tr>
                <td>.prependTo(<span>HTMLElement</span>)</td>
                <td>Insert content/elements, to the beginning of element specified in parameter</td>
              </tr>
              <tr>
                <td>.insertBefore(<span>target</span>)</td>
                <td>Insert every element in the set of matched elements before the target. Target could be specified as CSS selector or HTML element or Dom7 collection</td>
              </tr>
              <tr>
                <td>.insertAfter(<span>target</span>)</td>
                <td>Insert every element in the set of matched elements after the target. Target could be specified as CSS selector or HTML element or Dom7 collection</td>
              </tr>
              <tr>
                <td>.next(<span>[selector]</span>)</td>
                <td>Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector</td>
              </tr>
              <tr>
                <td>.nextAll(<span>[selector]</span>)</td>
                <td>Get all following siblings of each element in the set of matched elements, optionally filtered by a selector</td>
              </tr>
              <tr>
                <td>.prev(<span>[selector]</span>)</td>
                <td>Get the immediately preceding sibling of each element in the set of matched elements, optionally filtered by a selector</td>
              </tr>
              <tr>
                <td>.prevAll(<span>[selector]</span>)</td>
                <td>Get all preceding siblings of each element in the set of matched elements, optionally filtered by a selector</td>
              </tr>
              <tr>
                <td>.siblings(<span>[selector]</span>)</td>
                <td>Get the siblings of each element in the set of matched elements, optionally filtered by a selector</td>
              </tr>
              <tr>
                <td>.parent(<span>[selector]</span>)</td>
                <td>Get the first parent of each element in the current set of matched elements, optionally filtered by a selector</td>
              </tr>
              <tr>
                <td>.parents(<span>[selector]</span>)</td>
                <td>Get the ancestors of each element in the current set of matched elements, optionally filtered by a selector</td>
              </tr>
              <tr>
                <td>.closest(<span>[selector]</span>)</td>
                <td>For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree</td>
              </tr>
              <tr>
                <td>.find(<span>selector</span>)</td>
                <td>Get the descendants of each element in the current set of matched elements, filtered by a selector</td>
              </tr>
              <tr>
                <td>.children(<span>selector</span>)</td>
                <td>Get the children of each element in the set of matched elements, optionally filtered by a selector</td>
              </tr>
              <tr>
                <td>.filter(<span>callback</span>)</td>
                <td>
                  Filter collection of elements<pre><code class="js"><span class="token keyword">var</span> redLinks <span class="token operator">=</span> <span class="token function">$$</span><span class="token punctuation">(</span><span class="token string">'a'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">index<span class="token punctuation">,</span> el</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword-block">return</span> <span class="token function">$$</span><span class="token punctuation">(</span><span class="token context">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">hasClass</span><span class="token punctuation">(</span><span class="token string">'red'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</pre></code>
                </td>
              </tr>
              <tr>
                <td>.remove()</td>
                <td>Remove/detach matched elements from the Dom</td>
              </tr>
              <tr>
                <td>.empty()</td>
                <td>Remove all child nodes of the set of matched elements from the DOM. Alias for <code>.html('')</code></td>
              </tr>
              <tr>
                <th colspan="2">Shortcuts</th>
              </tr>
              <tr>
                <td>.click()</td>
                <td>Trigger "click" event on collection</td>
              </tr>
              <tr>
                <td>.click(<span>handler</span>)</td>
                <td>Add "click" event handler to collection</td>
              </tr>
              <tr>
                <td>.blur()</td>
                <td>Trigger "blur" event on collection</td>
              </tr>
              <tr>
                <td>.blur(<span>handler</span>)</td>
                <td>Add "blur" event handler to collection</td>
              </tr>
              <tr>
                <td>.focus()</td>
                <td>Trigger "focus" event on collection</td>
              </tr>
              <tr>
                <td>.focus(<span>handler</span>)</td>
                <td>Add "focus" event handler to collection</td>
              </tr>
              <tr>
                <td>.focusin()</td>
                <td>Trigger "focusin" event on collection</td>
              </tr>
              <tr>
                <td>.focusin(<span>handler</span>)</td>
                <td>Add "focusin" event handler to collection</td>
              </tr>
              <tr>
                <td>.focusout()</td>
                <td>Trigger "focusout" event on collection</td>
              </tr>
              <tr>
                <td>.focusout(<span>handler</span>)</td>
                <td>Add "focusout" event handler to collection</td>
              </tr>
              <tr>
                <td>.keyup()</td>
                <td>Trigger "keyup" event on collection</td>
              </tr>
              <tr>
                <td>.keyup(<span>handler</span>)</td>
                <td>Add "keyup" event handler to collection</td>
              </tr>
              <tr>
                <td>.keydown()</td>
                <td>Trigger "keydown" event on collection</td>
              </tr>
              <tr>
                <td>.keydown(<span>handler</span>)</td>
                <td>Add "keydown" event handler to collection</td>
              </tr>
              <tr>
                <td>.keypress()</td>
                <td>Trigger "keypress" event on collection</td>
              </tr>
              <tr>
                <td>.keypress(<span>handler</span>)</td>
                <td>Add "keypress" event handler to collection</td>
              </tr>
              <tr>
                <td>.submit()</td>
                <td>Trigger "submit" event on collection</td>
              </tr>
              <tr>
                <td>.submit(<span>handler</span>)</td>
                <td>Add "submit" event handler to collection</td>
              </tr>
              <tr>
                <td>.change()</td>
                <td>Trigger "change" event on collection</td>
              </tr>
              <tr>
                <td>.change(<span>handler</span>)</td>
                <td>Add "change" event handler to collection</td>
              </tr>
              <tr>
                <td>.mousedown()</td>
                <td>Trigger "mousedown" event on collection</td>
              </tr>
              <tr>
                <td>.mousedown(<span>handler</span>)</td>
                <td>Add "mousedown" event handler to collection</td>
              </tr>
              <tr>
                <td>.mousemove()</td>
                <td>Trigger "mousemove" event on collection</td>
              </tr>
              <tr>
                <td>.mousemove(<span>handler</span>)</td>
                <td>Add "mousemove" event handler to collection</td>
              </tr>
              <tr>
                <td>.mouseup()</td>
                <td>Trigger "mouseup" event on collection</td>
              </tr>
              <tr>
                <td>.mouseup(<span>handler</span>)</td>
                <td>Add "mouseup" event handler to collection</td>
              </tr>
              <tr>
                <td>.mouseenter()</td>
                <td>Trigger "mouseenter" event on collection</td>
              </tr>
              <tr>
                <td>.mouseenter(<span>handler</span>)</td>
                <td>Add "mouseenter" event handler to collection</td>
              </tr>
              <tr>
                <td>.mouseleave()</td>
                <td>Trigger "mouseleave" event on collection</td>
              </tr>
              <tr>
                <td>.mouseleave(<span>handler</span>)</td>
                <td>Add "mouseleave" event handler to collection</td>
              </tr>
              <tr>
                <td>.mouseout()</td>
                <td>Trigger "mouseout" event on collection</td>
              </tr>
              <tr>
                <td>.mouseout(<span>handler</span>)</td>
                <td>Add "mouseout" event handler to collection</td>
              </tr>
              <tr>
                <td>.mouseover()</td>
                <td>Trigger "mouseover" event on collection</td>
              </tr>
              <tr>
                <td>.mouseover(<span>handler</span>)</td>
                <td>Add "mouseover" event handler to collection</td>
              </tr>
              <tr>
                <td>.touchstart()</td>
                <td>Trigger "touchstart" event on collection</td>
              </tr>
              <tr>
                <td>.touchstart(<span>handler</span>)</td>
                <td>Add "touchstart" event handler to collection</td>
              </tr>
              <tr>
                <td>.touchend()</td>
                <td>Trigger "touchend" event on collection</td>
              </tr>
              <tr>
                <td>.touchend(<span>handler</span>)</td>
                <td>Add "touchend" event handler to collection</td>
              </tr>
              <tr>
                <td>.touchmove()</td>
                <td>Trigger "touchmove" event on collection</td>
              </tr>
              <tr>
                <td>.touchmove(<span>handler</span>)</td>
                <td>Add "touchmove" event handler to collection</td>
              </tr>
              <tr>
                <td>.resize(<span>handler</span>)</td>
                <td>Add "resize" event handler to collection</td>
              </tr>
              <tr>
                <td>.scroll(<span>handler</span>)</td>
                <td>Add "scroll" event handler to collection</td>
              </tr>
            </tbody>
          </table>
          <h2>Animation</h2>
          <div class="method-wrap">
            <p><span class="method">.animate(<span>properties</span>, <span>parameters</span>)</span><span>- Perform a custom animation of a set of CSS properties</span></p>
            <ul class="method-parameters">
              <li><span class="parameter">properties</span> - <span class="parameter-type">object</span> - CSS properties to animate</li>
              <li><span class="parameter">parameters</span> - <span class="parameter-type">object</span> - animation parameters</li>
            </ul>
            <p class="method-returns">returns Dom7 collection</p>
          </div><pre><code class="js"><span class="token function">$$</span><span class="token punctuation">(</span><span class="token string">'#animate-me'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">animate</span><span class="token punctuation">(</span>
    <span class="token comment">/* CSS properties to animate, e.g.: */</span>
    <span class="token punctuation">{</span>
        <span class="token string">'margin-left'</span><span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
        <span class="token string">'width'</span><span class="token punctuation">:</span> <span class="token number">200</span><span class="token punctuation">,</span>
        <span class="token string">'height'</span><span class="token punctuation">:</span> <span class="token number">300</span><span class="token punctuation">,</span>
        <span class="token string">'opacity'</span><span class="token punctuation">:</span> <span class="token number">0.5</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token comment">/* Animation parameters */</span>
    <span class="token punctuation">{</span>
        <span class="token comment">// Animation duraion in ms, optional (default to 300)</span>
        duration<span class="token punctuation">:</span> <span class="token number">300</span><span class="token punctuation">,</span>
        <span class="token comment">// Animation easing, optional (default to 'swing'), can be also 'linear'</span>
        easing<span class="token punctuation">:</span> <span class="token string">'swing'</span><span class="token punctuation">,</span>
        <span class="token comment">/* Callbacks */</span>
        <span class="token comment">// Animation begins, optional</span>
        <span class="token function-variable function">begin</span><span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">elements</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token built-in">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'animation began'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token comment">// Animation completed, optional</span>
        <span class="token function-variable function">complete</span><span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">elements</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token built-in">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'animation completed'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token comment">// Animation in progress, optional</span>
        <span class="token function-variable function">progress</span><span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">elements<span class="token punctuation">,</span> complete<span class="token punctuation">,</span> remaining<span class="token punctuation">,</span> start</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token comment">/* Where
            complete - The call's completion percentage (as a decimal value)
            remaining - How much time remains until the call completes (in ms)
            start - The absolute time at which the call began (in ms)
            */</span>
            <span class="token built-in">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'animation in progress'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></code>
          <p>It also supports chaining que:</p><pre><code class="js"><span class="token function">$$</span><span class="token punctuation">(</span><span class="token string">'#animate-me'</span><span class="token punctuation">)</span>
    <span class="token punctuation">.</span><span class="token function">animate</span><span class="token punctuation">(</span>
        <span class="token punctuation">{</span>
            <span class="token string">'margin-left'</span><span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
            <span class="token string">'width'</span><span class="token punctuation">:</span> <span class="token number">200</span><span class="token punctuation">,</span>
            <span class="token string">'height'</span><span class="token punctuation">:</span> <span class="token number">300</span><span class="token punctuation">,</span>
            <span class="token string">'opacity'</span><span class="token punctuation">:</span> <span class="token number">0.5</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">)</span>
    <span class="token punctuation">.</span><span class="token function">animate</span><span class="token punctuation">(</span>
        <span class="token punctuation">{</span>
            <span class="token string">'width'</span><span class="token punctuation">:</span> <span class="token number">50</span><span class="token punctuation">,</span>
            <span class="token string">'height'</span><span class="token punctuation">:</span> <span class="token number">50</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span></pre></code>
        </div>
      </div>
    </main>
    <script src="/framework7-v3/js/jquery-1.11.0.min.js"></script>
    <script src="/framework7-v3/js/main.js"></script>
  </body>
</html>